<template>
  <div class="content-card">
    <div class="title">
      <a-icon type="tags"></a-icon>
      <span>{{ "目录资源类型" }}</span>
    </div>
    <div class="body">
      <div id="dir-editing__chart2"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "i5-chart",
  props: {
    kb: {
      type: Number,
      default: 0,
    },
    jk: {
      type: Number,
      default: 0,
    },
    wj: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      kbz: 0,
      jkz: 0,
      wjz: 0,
    };
  },
  mounted() {
    this.registerAndSetCharts2();
  },
  watch: {
    kb(n) {
      this.kbz = n;
      this.registerAndSetCharts2();
    },
    jk(n) {
      this.jkz = n;
      this.registerAndSetCharts2();
    },
    wj(n) {
      this.wjz = n;
      this.registerAndSetCharts2();
    },
  },
  methods: {
    registerAndSetCharts2() {
      let charts2Ref = this.$echarts.init(
        document.getElementById("dir-editing__chart2")
      );
      let option2 = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
        },
        series: [
          {
            name: "目录资源类型",
            type: "pie",
            radius: ["30%", "50%"],
            top: "-15%",
            emphasis: {
              label: {
                fontSize: "12",
                fontWeight: "bold",
              },
            },
            data: [
              { value: this.kbz, name: "分库表" },
              { value: this.wjz, name: "文件" },
              { value: this.jkz, name: "接口" },
            ],
          },
        ],
      };
      charts2Ref.setOption(option2);
    },
  },
};
</script>

<style lang="less" scoped>
.content-card {
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    i {
      color: #6989c6;
      margin: 0 15px;
      font-size: 18px;
    }
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
  .body {
    width: 100%;
    height: 300px;
    :first-child {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
